<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/settlements">
				<b class="colors">/<img style="top: 1px" src="../../assets/img/sidebar7.png" />无感发薪结算单</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>无感发薪结算单详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="input1">
			</el-input> -->
		</div>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="information">
						<div class="infoTit">
							<img style="margin: 15px 0px -30px 30px;opacity: 0;" class="infoImg" src="../../assets/img/img.jpg" />
							<b style="font-weight: bold !important;">项目名称：{{ SelectPlatformData.projectName }}</b>
						</div>
						<!-- <el-button size="small" v-if="!detailsFlag" type="primary" @click="searchPayment()">查询打款状态</el-button> -->
						<!-- <el-button size="small" v-if="detailsFlag" type="primary" @click="searchPayment1()">查询打款状态</el-button> -->
					</div>
					<div class="infoCon">
						<b><em>结算单编号：</em>{{ SelectPlatformData.settlementNo  }}</b>
						<b><em>发放人数：</em>{{ SelectPlatformData.personNum  }}</b>
						<b><em>发放总金额：</em>{{ SelectPlatformData.amount  }}</b>
						<b><em>服务费率：</em>{{ SelectPlatformData.feeRate }}%</b>
						<b><em>服务费：</em>{{ SelectPlatformData.fee }}</b>
						<b><em>实付总金额：</em>{{ SelectPlatformData.settlementAmount }}</b>
						<b><em>发放状态：</em>{{ settlementStatus[SelectPlatformData.paymentStatuts] }}</b>
						<b><em>建单时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(SelectPlatformData.createTime)) }}</b>
						<b>
							<em>打款凭证：</em>
							<em style="text-align: left;" v-if="SelectPlatformData.paymentReceiptUrl == null || SelectPlatformData.paymentReceiptUrl == ''">--</em>
							<em @click="openUrl(SelectPlatformData.paymentReceiptUrl)" class="showCloro" v-else>查看</em>
						</b>
						<b v-if="SelectPlatformData.platformPayTime == null"><em>发放时间：</em>--</b>
						<b v-else><em>发放时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(SelectPlatformData.platformPayTime)) }}</b>
						<b>
							<em>打款明细：</em>
							<em style="text-align: left;" v-if="SelectPlatformData.paymentDetailUrl == null || SelectPlatformData.paymentDetailUrl == ''">--</em>
							<em @click="openUrl(SelectPlatformData.paymentDetailUrl)" class="showCloro" v-else>查看</em>
						</b>
					</div>
					<div style="clear: both;"></div>
					<div class="infoCons">
						<ul :class="rechargeChange">
							<li style="margin-left: 6%;">
								<span><b>1</b></span>
								<em>待发薪</em>
								<strong></strong>
							</li>
							<li>
								<span><b>2</b></span>
								<em>平台打款审核中</em>
								<strong></strong>
							</li>
							<!-- <li>
								<span><b>3</b></span>
								<em>打款中</em>
								<strong></strong>
							</li> -->
							<li style="width: auto;">
								<span><b>3</b></span>
								<em>已完成</em>
							</li>
						</ul>
						<div class="infoConLine"></div>
						<div style="clear: both;"></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">无感发薪结算单明细
					</div>
					<div class="excelDownload">
						<!-- <el-button size="small" type="primary">下载</el-button> -->
						<el-button size="small" type="primary" @click="excelDownload()">下载</el-button>
						<el-button size="small" type="primary" @click="excelDownload1()">下载确认单</el-button>
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="number" sortable="custom" label="序号">
						</el-table-column>
						<el-table-column prop="name" sortable="custom" label="姓名">
						</el-table-column>
						<el-table-column prop="idcard" sortable="custom" label="身份证">
						</el-table-column>
						<el-table-column prop="bankNo" sortable="custom" label="银行卡号">
						</el-table-column>
						<el-table-column prop="bankName" sortable="custom" width="140" label="开户行">
						</el-table-column>
						<el-table-column prop="bankAddress" sortable="custom" width="140" label="开户地">
						</el-table-column>
						<el-table-column prop="phone" sortable="custom" width="100" label="手机号">
						</el-table-column>
						<el-table-column prop="amount" sortable="custom" width="140" label="发放金额">
							<template #default="item">
								{{ formatNumber(item.row.amount) }}
							</template>
						</el-table-column>
						<el-table-column prop="feeRate" sortable="custom" label="服务费率">
							<template #default="item">
								{{ formatNumber(item.row.feeRate) }}%
							</template>
						</el-table-column>
						<el-table-column prop="fee" sortable="custom" label="服务费">
							<template #default="item">
								{{ formatNumber(item.row.fee) }}
							</template>
						</el-table-column>
						<el-table-column prop="settlementAmount" sortable="custom" label="实付金额">
							<template #default="item">
								{{ formatNumber(item.row.settlementAmount) }}
							</template>
						</el-table-column>
						<!-- <el-table-column prop="caozuo" label="操作" class-name="editor">
							<template #default="item">
								<el-button type="text" @click="settlementDetails(item.row.settlementNo, item.row.businessId)">详情</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="renwuTotals">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

		<!-- 点击详情 结算任务明细 -->
		<el-dialog title="结算详情" custom-class="examine-style" v-model="settlementDetailShow" width="80%">
			<div class="cardTits">
				<el-table :data="settlementDetailArr" stripe style="width: 100%" @sort-change="sortChange1">
					<el-table-column width="30">
					</el-table-column>
					<el-table-column prop="taskName" sortable="custom" label="任务名称">
					</el-table-column>
					<el-table-column prop="subFee" sortable="custom" label="实际服务费">
						<template #default="item">
							{{ formatNumber(item.row.subFee) }}
						</template>
					</el-table-column>
					<el-table-column prop="subFee" sortable="custom" label="预计服务费">
						<template #default="item">
							<template v-if="item.row.fine == 0">
								{{ formatNumber(item.row.subFee - item.row.bonus) }}
							</template>
							<template v-else>
								{{ formatNumber(item.row.subFee + item.row.fine) }}
							</template>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="createTime" sortable="custom" width="100" label="生成时间">
						<template #default="item">
							{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="name" sortable="custom" label="接单个体户">
					</el-table-column> -->
					<el-table-column prop="legalName" sortable="custom" label="个体户经营者" width="120" align="center">
					</el-table-column>
					<el-table-column prop="phone" sortable="custom" label="电话号码" width="100">
					</el-table-column>
					<!-- <el-table-column prop="socialCreditCode" sortable="custom" width="150" label="统一社会信用代码">
					</el-table-column> -->
					<el-table-column prop="takeStatus" label="是否领取" align="center">
						<template #default="scope">
							{{ scope.row.takeStatus == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column prop="isComplete" label="是否完成" align="center">
						<template #default="scope">
							{{ scope.row.isComplete == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column prop="bonus" sortable="custom" label="奖励" width="70" align="center">
						<template #default="item">
							{{ formatNumber(item.row.bonus) }}
						</template>
					</el-table-column>
					<el-table-column prop="fine" sortable="custom" label="处罚" width="70" align="center">
						<template #default="item">
							{{ formatNumber(item.row.fine) }}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="auditStatus" label="审核状态" align="center">
						<template #default="scope">
							{{ auditStatus[scope.row.auditStatus] }}
						</template>
					</el-table-column> -->
				</el-table>
				<el-pagination v-if="settlementDetailArr.length > 0" @size-change="renwuPageChange" @current-change="renwuCurrentChange"
					:current-page="renwuCurrentPage" :page-sizes="renwuArrPage" :page-size="renwuSelectPage"
					layout="total, sizes, prev, pager, next, jumper" :total="renwuTotal">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="下载确认单" custom-class="examine-style" v-model="excelDownloadShows" width="40%">
			<div class="cardTits">
				<div class="serveTime">选择服务时间：</div>
				<el-date-picker
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    range-separator="~">
                 </el-date-picker>
			</div>
			<template #footer>
				<span class="dialog-footer">
				<el-button @click="addTaskMethods1">取 消</el-button>
				<el-button type="primary" @click="addTaskMethods"
					>确 定</el-button
				>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios";	
	export default {
		name: "dashboard",
		data() {
			return {
				settlementStatus: {
					// 结算状态
					1: "未打款",
					2: "已打款",
					3: "已作废",
					4: "部分打款",
					5: "平台审核中",
				},
				timer: null,
				countdown: 60,
				detailsFlag: false,
				value1: '',
				startTime: '',
				endTime: '',
				serveTime: '',
				businessNames: '',
				rechargeStatus: 1,
				rechargeChange: '',
				excelDownloadShows: false,
				SelectPlatformData: {}, // 灵活用功平台信息
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				total: 0, // 总条数
				renwuTotals: 0, // 结算任务明细总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				tableData1: [],
				renwuTotal: 0, // 结算任务明细总条数
				renwuCurrentPage: 1, // 结算任务明细当前页
				renwuArrPage: [10, 20], // 结算任务明细每页条数
				renwuSelectPage: 10, // 结算任务明细每页选中条数
				settlementDetailArr: [], // 任务结算明细table数据
				settlementDetailShow: false, // 是否显示结算任务明细
				input1: '',
				auditStatus: {
					0: '待审核'
				},
				id: '',
				busid: ''
			};
		},
		components: {},
		mounted() {
			this.getTableData();
			this.getSelectPlatform()
			
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},

		methods: {
			searchPayment(){
				this.countdown = 60;
				this.detailsFlag = true
				this.timer = setInterval(() => {
					if (this.countdown > 0 && this.countdown <= 60) {
						this.countdown--;
					}else {
						this.detailsFlag = false
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 10)
			},
			searchPayment1(){
				this.$message({
					message: '请稍后再试',
					type: 'success'
				});
			},
			handleSizeChange(val) {
				this.selectPage = val
				this.getSelectPlatform()
			},
			handleCurrentChange(val) {
				// 切换当前页
				this.currentPage = val
				this.getSelectPlatform()
			},
			getSelectPlatform() {
				// 获取灵活用功平台信息
				this.$http({
					url: '/api/quick/numb/getNumbDetailPage',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						settleNo: this.$route.query.settleNo,
						"platformId": "",
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.tableData = data.result.list
						this.renwuTotals = data.result.total
					}
				})
			},
			openUrl(url) {
				// console.log(url.slice(5))
				// 打开新窗口查看协议
				if(url === '' || url === null || url === undefined) return
				let str = url.substring(0, url.indexOf('?'))
				let suffix = str.substring(str.lastIndexOf('.'), url.length)
				if(suffix === '.PDF' || suffix === '.pdf') {
					window.open(url)
				}else {
					let newwin = window.open();
					newwin.document.write("<img src=" + url + " />");
				}
			},
			settlementDetails(id, busid) {
				// 结算任务明细
				this.id = id
				this.busid = busid
				this.settlementDetailShow = true
				this.getRenwuTableData(1, 10)
			},
			renwuCurrentChange(val) {
				// 结算任务明细切换分页
				this.renwuCurrentPage = val
				this.getRenwuTableData(this.renwuCurrentPage, 10)
			},
			renwuPageChange(val) {
				// 结算任务明细切换当前页显示条数
				this.renwuSelectPage = val
				this.renwuCurrentPage = 1
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
			getTableData() {
				// 获取列表信息
				this.$http({
					url: '/api/quick/numb/selectNumbById?id=' + this.$route.query.id,
					method: 'get',
					headers: {
						'Content-Type': 'application/json'
					},
				}).then(data => {
					if(data.code === 0) {
						this.SelectPlatformData = data.result
						this.total = data.result.total
						if(data.result.paymentStatuts == 1){
							this.rechargeChange = 'nextFirst'
						}else if(data.result.paymentStatuts == 5){
							this.rechargeChange = 'nextFirst nextSecond'
						}else if(data.result.paymentStatuts == 2){
							this.rechargeChange = 'nextFirst nextSecond nextThird'
						}
						// else if(data.result.paymentStatuts == 2){
						// 	this.rechargeChange = 'nextFirst nextSecond nextThird nextFour'
						// }
					}
				})
			},
			getRenwuTableData(current, select) {
				// 获取结算任务明细列表
				this.$http({
					url: '/api/settlement/selectTaskListByNo',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						// "settlementNo": "",
						"settlementNo": this.id,
						"businessId": this.busid,
						"platformId": "",
						"pageNum": current,
						"pageSize": select,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					console.log(data)
					if(data.code === 0) {
						this.settlementDetailArr = data.result.list
						
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "legalName"|| d.id == "receiveBank") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getTableData();
			},
			sortChange1(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "taskName"|| d.id == "legalName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
			excelDownload() {
				// 下载
				// let checkSelect = new FormData();
				let info = JSON.parse(localStorage.getItem("bussines_info"))
				let bussines_token = localStorage.getItem("bussines_token")
				axios({
					method: "POST",
					url: "/api/quick/numb/downDetails",
					data: {
						settleNo: this.$route.query.settleNo,
					},
					responseType: "blob",
					headers: {
						"websiteName": window.location.hostname,
						"Authorization": bussines_token,
						"businessId": info.businessId,
						"businessNo": info.businessNo,
						"platformId": info.platformId,
						"platformNo": info.platformNo,
						"content-type": "application/json;charset=UTF-8",
						// "Content-Type": "application/json",
						"businessType": 3,
					}
				})
				.then((res) => {
				const blob = new Blob([res.data]);
				const downloadElement = document.createElement("a");
				const href = window.URL.createObjectURL(blob);
				//后台再header中传文件名
				downloadElement.href = href;
				downloadElement.download =
					"结算单明细" + this.format("yyyyMMddhhmmss", new Date()) + ".xlsx";
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement); // 下载完成移除元素
				window.URL.revokeObjectURL(href); // 释放掉blob对象
				})
				.catch((err) => {
				console.log(err);
				});
			},
			excelDownload1() {
				this.endTime = ''
				this.startTime = ''
				this.excelDownloadShows = true;
				this.businessNames = this.$route.query.businessName
			},
			addTaskMethods1() {
				this.excelDownloadShows = false
			},
			addTaskMethods() {
				// 获取列表信息
				if(this.value1){
					// this.format("yyyyMMddhh", new Date(this.value1[1]))
					this.endTime = this.format("yyyy年MM月dd日", new Date(this.value1[1]))
					this.startTime = this.format("yyyy年MM月dd日", new Date(this.value1[0]))
				}else {
					this.endTime = ''
					this.startTime = ''
				}
				this.serveTime = this.startTime + '-' + this.endTime
				// 下载
				let info = JSON.parse(localStorage.getItem("bussines_info"))
				// let checkSelect = new FormData();
				axios({
					method: "POST",
					url: "/api/quick/numb/downConfirmBill",
					data: {
						id: this.$route.query.id,
						cycle: this.serveTime
					},
					responseType: "blob",
					headers: {
						"businessType": 3,
						"websiteName": window.location.hostname,
						"Authorization": localStorage.getItem("bussines_token"),
						"businessId": this.businessId,
						"businessNo": info.businessNo,
						"platformId": info.platformId,
						"platformNo": info.platformNo,
					},
				})
				.then((res) => {
				const blob = new Blob([res.data]);
				const downloadElement = document.createElement("a");
				const href = window.URL.createObjectURL(blob);
				//后台再header中传文件名
				downloadElement.href = href;
				downloadElement.download = "确认单-" + this.businessNames + '-' + this.format("yyyyMMddhhmmss", new Date()) + ".xlsx";
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement); // 下载完成移除元素
				window.URL.revokeObjectURL(href); // 释放掉blob对象
				this.excelDownloadShow = false
				})
				.catch((err) => {
				console.log(err);
				});
			}
			
		}
	};
</script>
<style scoped>
.infoCons {
	margin: 0px 15% 35px;
	position: relative;
	top: 40px;
    left: 30px;
}
.infoCons ul li {
	float: left;
	width: 37%;
	position: relative;
}
.infoCons ul li span {
	display: inline-block;
    background: rgb(204, 204, 204);
    width: 44px;
    height: 44px;
    border-radius: 100%;
	position: relative;
    z-index: 3;
}
.infoCons ul li b {
	background: rgb(204, 204, 204);
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    border-radius: 100%;
    color: #fff;
    position: relative;
    z-index: 1;
    top: 3px;
    left: 3px;
    border: 1px solid #fff;
}
.infoCons ul li em {
	display: block;
    font-size: 13px;
    font-style: normal;
    color: #6C8198;
    width: 100px;
    text-align: center;
    margin: 10px 0 30px -28px;
}
.infoCons ul li strong {
	width: 100%;
    position: absolute;
    left: 10px;
    height: 4px;
    background: #ccc;
    top: 21px;
    z-index: 2;
}

.infoCons ul li:nth-child(1) span,.infoCons ul li:nth-child(1) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul:nth-child(1) li em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextFirst li:nth-child(1) span,.infoCons ul.nextFirst li:nth-child(1) b,.infoCons ul.nextFirst li:nth-child(1) strong {
	background-color: #326CF0;
}
.infoCons ul.nextFirst li:nth-child(1) em {
	color: #326CF0;
}

.infoCons ul.nextFirst li:nth-child(2) span,.infoCons ul.nextFirst li:nth-child(2) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul.nextFirst li:nth-child(2) em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextSecond li:nth-child(2) span,.infoCons ul.nextSecond li:nth-child(2) b,.infoCons ul.nextSecond li:nth-child(2) strong {
	background-color: #326CF0;
}
.infoCons ul.nextSecond li:nth-child(2) em {
	color: #326CF0;
}

.infoCons ul.nextSecond li:nth-child(3) span,.infoCons ul.nextSecond li:nth-child(3) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul.nextSecond li:nth-child(3) em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextThird li:nth-child(3) span,.infoCons ul.nextThird li:nth-child(3) b,.infoCons ul.nextThird li:nth-child(3) strong {
	background-color: #326CF0;
}
.infoCons ul.nextThird li:nth-child(3) em {
	color: #326CF0;
}

/* .infoCons ul.nextThird li:nth-child(4) span,.infoCons ul.nextThird li:nth-child(4) b {
	background-color: #326CF0;
}
.infoCons ul.nextThird li:nth-child(4) em {
	color: #326CF0;
}

.infoCons ul.nextFour li:nth-child(4) span,.infoCons ul.nextFour li:nth-child(4) b {
	background-color: #326CF0;
}
.infoCons ul.nextFour li:nth-child(4) em {
	color: #326CF0;
} */

.infoConLine {
    position: absolute;
    top: 21px;
    left: 8.5%;
    width: 75%;
    height: 4px;
    background: #cccccc;
}
.cardTit {
    color: rgba(10, 46, 106, 1);
    line-height: 50px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: normal;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 10px;
    cursor: pointer;
    z-index: 111;
}
.serveTime {
	float: left;
    margin-left: 50px;
    position: relative;
    top: 10px;
}
.showCloro {
	cursor: pointer;
	color: #326CF0;
    text-align: left;
}
</style>